<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style type="text/css">
        .grid {
            margin: auto;
            width: 500px;
            text-align: center;
        }

        .grid table {
            width: 100%;
            border-collapse: collapse;
        }

        .grid th,
        td {
            padding: 10;
            border: 1px dashed orange;
            height: 35px;
            line-height: 35px;
        }

        .grid th {
            background-color: orange;
        }

        .titleBox {
            text-align: center;
            margin: 20px auto;
        }

        button {
            background-color: lightgreen;
        }
    </style>


</head>

<body>
    <div id="app">

        <div class="titleBox">
            <input type="text" placeholder="书名" v-model.trim='name'>
            <button @click='addBook()'>点击添加</button>
            <button @click='changeBook()'>点击修改</button>
        </div>

        <div class="grid">
            <table>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>名称</th>
                        <th>时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for='(item,index) in books' :key='item.id'>
                      <td>
                          {{item.id}}
                      </td>
                      <td>
                        {{item.name}}
                    </td>
                    <td>
                        {{item.date}}
                    </td>
                        <td>
                            <a href="#" @click.prevent='editBook(item.id)'>修改</a>
                            <span>|</span>
                            <a href="#" @click.prevent='delBook(item.id)'>删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script type="text/javascript" src="./vue.js"></script>
    <script type="text/javascript">
        /*
          图书管理-图书列表展示功能
          注意事项：<a href="" @click.prevent>修改</a>
          事件绑定时，可以只添加修饰符，而不绑定事件函数
        */
         let vm = new Vue({
            el:'#app',
            data: {
                name: "",
                editId: 0,

                books: [{
                    id: 1,
                    name: '三国演义',
                    date: new Date()
                }, {
                    id: 2,
                    name: '水浒传',
                    date: new Date()
                }, {
                    id: 3,
                    name: '红楼梦',
                    date: new Date()
                }, {
                    id: 4,
                    name: '西游记',
                    date: new Date()
                }]
            },
            methods: {
                //添加
                addBook() {
                    let indexId = this.books[this.books.length - 1].id
                    indexId++
                    let bookObj = {
                        id : indexId,
                        name : this.name,
                        date : new Date()
                    }
                    this.books.push(bookObj)
                },
                //删除
                delBook(id) {
                    this.books = this.books.filter(item => item.id != id)
                },
                //编辑
                editBook(id) {
                    let currentIndex = this.books.findIndex(item => item.id == id)

                    this.name = this.books[currentIndex].name
                    this.id = id
                },
                changeBook() {
                  this.books = this.books.filter(item => {
                      if(item.id == this.id) {
                          item.name = this.name
                      }
                      return item
                  })  
                  this.name = ''
                }
                
                
            }
        })
        
       
    </script>
</body>

</html>